﻿<html>

<head>

    <title>js指定区域全屏</title>

    <style>
        #fulldiv {
            background: #fff;
            width: 100%;
            text-align: center;
            height: 100%;
        }
    </style>

</head>

<body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
        <h1>这里是全屏显示的内容</h1>
    </div>
</body>

<script type="text/javascript">

    var fullscreen = false;

    let btn = document.getElementById('btn');

    let fullarea = document.getElementById('fulldiv')

    btn.addEventListener('click', function () {
        if (fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (fullarea.requestFullscreen) {
                fullarea.requestFullscreen();
            } else if (fullarea.webkitRequestFullScreen) {
                fullarea.webkitRequestFullScreen();
            } else if (fullarea.mozRequestFullScreen) {
                fullarea.mozRequestFullScreen();
            } else if (fullarea.msRequestFullscreen) {
                fullarea.msRequestFullscreen();
            }
        }
        fullscreen = !fullscreen;
    })

</script>

</html>